<template>
    <div class="add-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>article manage</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>add article</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form
            ref="ruleFormRef"
            :model="addArticleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
            <el-form-item label="article标题" prop="articleTitle">
                <el-input v-model="addArticleForm.articleTitle" placeholder="请输入 article 标题" />
            </el-form-item>
            <el-form-item label="article内容" prop="articleContent">
                <el-input v-model="addArticleForm.articleContent" type="textarea" :rows="10" placeholder="请输入 article/question 内容" />
            </el-form-item>
            <el-form-item label="article类型" prop="articleTypeIds">
                <el-select v-model="addArticleForm.articleTypeIds" multiple placeholder="选择类型" style="width: 100%">
                    <el-option v-for="(item,index) in configData.typeList" :key="index" :label="item.typeName" :value="item.typeId" />
                </el-select>
            </el-form-item>
            <el-form-item label="发布者" prop="isAnonymous">
                <el-radio-group v-model="addArticleForm.isAnonymous">
                    <el-radio label=1>匿名发布</el-radio>
                    <el-radio label=0>以当前登录人发布</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :disabled="addArtAble" @click="addArtDebounce(ruleFormRef)">
                    点击添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">数据重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage,ElNotification  } from 'element-plus'
import { $http } from '@/utils/axios.js'
import { onMounted } from 'vue-demi'
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance'
const formSize = ref('large')
const ruleFormRef = ref()
const addArtAble=ref(false)
let addArticleForm = reactive({
    articleTitle: '',
    articleContent: '',
    articleTypeIds: [],
    articleTypeName: '',
    // 是否匿名发布 0:真实名字  1:匿名
    isAnonymous: 0
})
onMounted(()=>{
    getArticleType()
})
//获取类型
const getArticleType = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/articleOperate/getAllArtTypes`).then((result) =>{
        configData.typeList = result
    })
}

const rules = reactive({
    articleTitle: [
        { required: true, message: '请输入有效的标题', trigger: 'blur' },
        { min: 3, max: 20, message: '标题长度在3~20之间', trigger: 'blur' },
    ],
    articleContent: [
        { required: true, message: '请输入有效的内容', trigger: 'blur' }
    ],
    articleTypeIds: [
        { required: true, message: '请选择有效的类型', trigger: 'blur' }
    ],
    isAnonymous: [
        { required: true, message: '请选择有效的发布者', trigger: 'blur' }
    ],
})
//提交表单
const addArtDebounce =  (formEl)=>{
    if (!formEl) return ElMessage.warning('表单校验错误,请正确完善内容')
     formEl.validate((valid, fields) => {
        if (valid) {
            addArtAble.value = true
            $http.post(`${gatewayPrefix}/${userMiddleContextPath}/planetArticles/insertArticleInfo`,addArticleForm).then(res=>{
                ElMessage.success('添加成功')
            }).catch(err =>{
                console.log("add art error:" + err);
                ElMessage.error(err.response.data.message || '添加失败，请联系管理员')
            }).finally(()=>{
                setTimeout(()=>{addArtAble.value=false},2000) 
            })
        } else {
            ElMessage.error('校验失败，请正确完善内容')
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    formEl.resetFields()
}
let configData = reactive({
    "typeList": []
})

</script>

<style scoped>
.add-box{
    width: 100%;
    height: 100%;
}

.add-box .demo-ruleForm{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    margin-top: 5%;
}

</style>